<template>
<div>
    <div class="center">
        <div class="header">
            <span class="iconfont icon-set" @click="toSet"></span>
        </div>
        <div class="avatar">
            <div class="title-img"><img src="https://img.yzcdn.cn/vant/cat.jpeg" alt=""></div>
            <div class="nick-name">
               <div class="id-name" ref="name">Geopolitical</div>
                <div class="id-num">ID: qw16541657945234815</div>
                <span class="iconfont icon-right"></span>
                <div class="exp">经验值：20/100</div>
            </div>
            
        </div>
        <div class="header-middle">
                <div>
                    <span>0</span>
                    <span>关注</span>
                </div>
                <div>
                    <span>0</span>
                    <span>粉丝</span>
                </div>
                <div>
                    <span>20</span>
                    <span>帮贡</span>
                </div>
        </div>
        <div class="header-bottom">
            <div>
                <span class="iconfont icon-cooking"></span>
                <span>作品</span>
            </div>
            <div>
                <span class="iconfont icon-recipe"></span>
                <span>食谱</span>
            </div>
            <div>
                <span class="iconfont icon-folder"></span>
                <span>收藏</span>
            </div>
            <div>
                <span class="iconfont icon-notepad"></span>
                <span>问题</span>
            </div>
        </div>
    </div>
    <div id="middle">
        
    </div>
</div>
    
</template>

<script>
// 导入字体图标
import "@/assets/icon-font/iconfont.css"
    export default {
        data () {
            return {
            }
        },
        mounted () {
			let name = sessionStorage.getItem('username')
			this.$refs.name.innerHTML = name
        },
        methods:{
            toSet(){
                 this.$router.push("/set")
            }
        }
    }
</script>

<style lang="scss" scoped>
*{
    box-sizing: border-box;
}
body{
    width: 100%;
    touch-action: none;
    
   .center{
       width: 100%;
       overflow: hidden;
       background: #fff;
        .header{
            width: 100%;
            height: 44px;
            position: fixed;
            top: 0;
            padding: 0 15px;
            text-align: right;
            line-height: 44px;
            cursor: pointer;
            .icon-set{
                font-size: 26px;;
            }
        }
        .avatar{
            margin-top: 44px;
            width: 100%;
            display: flex;
            .title-img{
                margin: 0 15px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .id-name{
                height: 28px;
                line-height: 28px;
                display: inline-block;
                vertical-align: middle;
                color: #4A4945;
                font-size: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .id-num{
                    font-size: 12px;
                    line-height: 16px;
                    color: #999999;
                    margin: 4px 0 10px 0;
            }
            .exp{
                margin: 0;
                font-size: 10px;
                line-height: 14px;
                color: #999999;
                margin-bottom: 5px;
            }
            .nick-name{
                margin-right:15px ;
                position: relative;
                height: 80px;
                flex: 1;
                .icon-right{
                        position: absolute;
                        right: 0;
                        top: 50%;
                        margin-top: -11px;
                        z-index: 3;
                }
            }
        }
        .header-middle{
            margin: 20px 37px;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #E7E2E5;
            display: flex;
            div{
                font-size: 14px;
                color: #4A4945;
                display: flex;
                flex-direction: column;
                text-align: center;
                flex: 1;
                span{
                    margin-bottom: 3px;
                }
                span:nth-child(2){
                    font-size: 11px;
                    color: #999999;
                }
            }
            div:nth-child(2){
                border-right: 1px solid #E7E2E5;
                border-left: 1px solid #E7E2E5;
            }
        }  
        .header-bottom{
            height: 65px;
            display: flex;
            justify-content: space-around;
            div{
                display: flex;
                flex-direction: column;
                text-align: center;
                .iconfont{
                    font-size: 40px;
                    color: rgb(238,232,213);
                    margin-bottom: 5px;
                }
                span:nth-child(2){
                    line-height: 16px;
                    font-size: 12px;
                    color: #4A4945;
                }
            }
            div:nth-child(1){
                .icon-cooking{
                    transform: rotate(180deg);
                }
            }
        }
               
   }

  } 
</style>
